<template>
  <div>
    <el-row :gutter="20" class="static">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="title">线上总推广订单</div>
          <div class="num">{{ userInfo.onLine }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="title">地推总订单</div>
          <div class="num">{{ userInfo.ground }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="title">本月线上总订单</div>
          <div class="num">{{ userInfo.monthOnLine }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="title">本月地推总订单</div>
          <div class="num">{{ userInfo.monthGround }}</div>
        </div>
      </el-col>
    </el-row>
    <div class="btn"><el-button type="primary" @click="close">关闭</el-button></div>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { treamDetailStatsticApi } from '@/api/user'
export default {
  name: 'UserDetails',
  props: {
    uid: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      userInfo: {
        onLine: 0,
        ground: 0,
        monthOnLine: 0,
        monthGround: 0
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      treamDetailStatsticApi(this.uid).then((res) => {
        this.userInfo = res.data
      })
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.grid-content {
  padding: 16px 0;
  text-align: center;
  background: #e0faf8;

  .title {
    font-size: 20px;
    font-weight: bold;
    color: rgba(42, 133, 217, 0.8);
  }

  .num {
    font-size: 16px;
    font-weight: bold;
    margin-top: 24px;
  }
}

.btn {
  display: flex;
  justify-content: right;
  margin-top: 150px;
}
</style>
